<template>
  <el-menu :default-openeds="['1']" class="el-menu">
    <el-submenu index="1">
      <template slot="title"><i class="el-icon-menu"></i>功能</template>
      <el-submenu index="1-1">
        <template slot="title">增删改查</template>
        <el-menu-item index="1-1-1" @click="createUser">增</el-menu-item>
        <el-menu-item index="1-1-2" @click="deleteUser">删</el-menu-item>
        <el-menu-item index="1-1-3" @click="updateUser">改</el-menu-item>
        <el-menu-item index="1-1-4" @click="selectUser">查</el-menu-item>
      </el-submenu>

      <el-submenu index="1-2">
        <template slot="title">店铺管理</template>
        <el-menu-item index="1-2-1" @click="shopManger">管理店铺账号密码</el-menu-item>
      </el-submenu>

      <el-submenu index="1-3">
        <template slot="title">商品管理</template>
        <el-submenu index="1-3-1">
          <template slot="title">商品分类管理</template>
          <tree></tree>
        </el-submenu>
        <el-menu-item index="1-3-2" @click="productManger">商品管理</el-menu-item>
      </el-submenu>

    </el-submenu>

    <el-submenu index="2">
      <template slot="title"><i class="el-icon-menu"></i>导航二</template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="2-4">
        <template slot="title">选项4</template>
        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
      </el-submenu>
    </el-submenu>

  </el-menu>
</template>

<script>
import tree from "./tree";
export default {
  name: "left",
  components: {
    tree,
  },
  methods:{
    createUser(){
      let tabs = this.$store.state.editableTabs
      let flag =true;
      tabs.forEach((tab, index) => {
        if (tab.title === "增") {
          let eleNav =  document.getElementsByClassName('el-tabs__nav')[0].children;
          eleNav[index].click();
          flag=false
        }
      });
      if(flag){
        this.$store.state.routePath="createUser"
        this.$store.state.titleName="增"
        this.$store.commit('addTab')
        this.$router.push("/createUser")
      }
    },
    deleteUser(){
      let tabs = this.$store.state.editableTabs
      let flag =true;
      tabs.forEach((tab, index) => {
        if (tab.title === "删") {
          //点击左侧选项选中对应tab
          let eleNav =  document.getElementsByClassName('el-tabs__nav')[0].children;
          eleNav[index].click();
          flag=false
        }
      });
      if(flag){
        this.$store.state.routePath="deleteUser"
        this.$store.state.titleName="删"
        this.$store.commit('addTab')
        this.$router.push("/deleteUser")
      }
    },
    updateUser(){
      let tabs = this.$store.state.editableTabs
      let flag =true;
      tabs.forEach((tab, index) => {
        if (tab.title === "改") {
          //点击左侧选项选中对应tab
          let eleNav =  document.getElementsByClassName('el-tabs__nav')[0].children;
          eleNav[index].click();
          flag=false
        }
      });
      if(flag){
        this.$store.state.routePath="updateUser"
        this.$store.state.titleName="改"
        this.$store.commit('addTab')
        this.$router.push("/updateUser")
      }
    },
    selectUser(){
      let tabs = this.$store.state.editableTabs
      let flag =true;
      tabs.forEach((tab, index) => {
        if (tab.title === "查") {
          //点击左侧选项选中对应tab
          let eleNav =  document.getElementsByClassName('el-tabs__nav')[0].children;
          eleNav[index].click();
          flag=false
        }
      });
      if(flag){
        this.$store.state.routePath="selectUser"
        this.$store.state.titleName="查"
        this.$store.commit('addTab')
        this.$router.push("/selectUser")
      }
    },

    shopManger(){
      let tabs = this.$store.state.editableTabs
      let flag =true;
      tabs.forEach((tab, index) => {
        if (tab.title === "管理店铺账号密码") {
          //点击左侧选项选中对应tab
          let eleNav =  document.getElementsByClassName('el-tabs__nav')[0].children;
          eleNav[index].click();
          flag=false
        }
      });
      if(flag){
        this.$store.state.routePath="shop"
        this.$store.state.titleName="管理店铺账号密码"
        this.$store.commit('addTab')
        this.$router.push("/shop")
      }
    },

    productManger(){
      let tabs = this.$store.state.editableTabs
      let flag =true;
      tabs.forEach((tab, index) => {
        if (tab.title === "商品管理") {
          //点击左侧选项选中对应tab
          let eleNav =  document.getElementsByClassName('el-tabs__nav')[0].children;
          eleNav[index].click();
          flag=false
        }
      });
      if(flag){
        this.$store.state.routePath="productManger"
        this.$store.state.titleName="商品管理"
        this.$store.commit('addTab')
        this.$router.push("/productManger")
      }
    }

  }
}
</script>

<style>
.el-menu{

}
</style>
